<template>
	<view class="friend">
		<u-navbar title="我的好友" :background="background" back-icon-color="#FFF" title-color="#fff" title-size="32"
		 :border-bottom="false"></u-navbar>
		<view class="bg">
			<image src="../../static/images/bg7@2x.png"></image>
		</view>
		<view class="fix-top">
			<view class="fix-navs u-flex u-col-center">
				<view class="" style="width: 100%;height: 80rpx;">
					<u-tabs :list="list" :is-scroll="false" bar-width="94" bar-height="4" active-color="#F5B340" :bold="false"
					 font-size="36" :current="current" @change="change"></u-tabs>
				</view>
			</view>
		</view>
		<view class="content-scroll">
			<u-empty text="暂无数据~" mode="list" v-if="!friend_list.length"></u-empty>
			<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="onreachBottom" scroll-anchoring v-else>
				<view class="item u-flex u-col-center u-row-between" v-for="(item,index) in friend_list" :key='item.id'>
					<view class="u-flex u-col-center">
						<image class="avatar-icon" :src="item.avatar" mode=""></image>
						<view class="name">
							{{item.nickName}}
						</view>
					</view>
					<image class="right-icon" src="../../static/images/icon_more@2x.png" mode=""></image>
				</view>
				<u-loadmore :status="status" @loadmore="onreachBottom" />
			</scroll-view>
		</view>
		<view class="redirect-home">
			<redirect-home></redirect-home>
		</view>
	</view>
</template>

<script>
	import RedirectHome from '@/components/redirectHome/redirectHome.vue';
	let meta = {
		current_page: 0,
		per_page: 15
	}
	export default {
		data() {
			return {
				list: [{
					name: '普通会员'
				}, {
					name: '农场主'
				}],
				current: 0,
				status: "loadmore",
				background: {
					// background: 'url(../../static/images/bg7@2x.png) no-repeat',
					// backgroundSize: 'cover',
				},
				friend_list: []
			};
		},
		onLoad() {
			uni.showLoading({
				mask:true,
				title:'数据加载中...'
			})
			this.getFriendList();
		},
		methods: {
			change(index) {
				this.current = index;
				this.friend_list = []
				meta.current_page = 0
				uni.showLoading({
					mask:true,
					title:'数据加载中...'
				})
				this.status = 'loading';
				this.getFriendList()
			},
			onreachBottom() {
				if (meta.total_pages === meta.current_page) {
					this.status = 'nomore'
					return false
				}
				this.status = 'loading';
				this.getFriendList();
			},
			getFriendList() {
				let params = {
					type: !this.current ? 1 : 2,
					page: meta.current_page + 1,
					page_size: meta.per_page
				}
				this.$u.api.getFriend(params).then(res => {
					this.status = "loadmore"
					uni.hideLoading()
					if (res.errno === "000") {
						res.result.data.forEach(el => {
							this.friend_list.push(el)
						})
						meta = res.result.meta
					}else{
						this.status = 'nomore';
					}
				})
			}
		},
		onUnload() {
			meta.current_page = 0
		},
		components: {
			RedirectHome
		}
	};
</script>

<style>
	.friend {
		background: rgb(241, 245, 246);
		height: 100vh;
	}

	.bg {
		position: fixed;
		top: -44px;
		z-index: 1;
		width: 100%;
		height: 324rpx;
	}

	.bg image {
		width: 100%;
		height: 100%;
		display: flex;
	}

	.fix-top {
		width: 100%;
		position: fixed;
		top: 171rpx;
		z-index: 3;
	}

	.fix-navs {
		width: 90%;
		height: 140rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin: 0 auto;
		overflow: hidden;
	}

	.content-scroll {
		width: 90%;
		height: 75vh;
		margin: 0 auto;
		position: relative;
		top: 182rpx;
	}

	.item {
		width: 100%;
		height: 140rpx;
		background: rgba(255, 255, 255, 1);
		border: 3rpx solid rgba(247, 138, 65, 1);
		border-radius: 20rpx;
		padding: 0 22rpx 0 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
	}

	.avatar-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		border: 3rpx solid rgba(247, 138, 65, 1);
		margin-right: 36rpx;
	}

	.right-icon {
		width: 50rpx;
		height: 50rpx;
	}

	.redirect-home {
		position: fixed;
		right: 0;
		bottom: 32rpx;
	}
</style>
